<template>
    <transition name="animate__animated animate__bounce" appear enter-active-class="animate__bounceIn"
        leave-active-class="animate__bounceOut">
        <section class="jumbotron">
            <h3 class="jumbotron-heading" style="text-align: center;">Search 🦖🦖🦖Github🦖🦖🦖 Users</h3>
            <div style="text-align: center; margin-top: 5%;">
                <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
                <button @click="searchUsers">Search</button>
            </div>
        </section>
    </transition>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Search',
    data() {
        return {
            keyWord: ''
        }
    },
    methods: {
        searchUsers() {
            //全球前更新List数据 由于isFirst只出现一次，后续不会加入全局事件总线中
            this.$bus.$emit('updateListDate', { isFirst: false, isLoading: true, errMsg: '', users: [] })
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`)
                .then(res => {
                    // console.log('请求成功了！')
                    // this.$bus.$emit('getUsers', res.data.items)
                    // this.$bus.$emit('updateListDate', false, false, '', res.data.items)
                    // 请求成功
                    this.$bus.$emit('updateListDate', { isLoading: false, errMsg: '', users: res.data.items })
                })
                .catch(err => {
                    console.error(err.message);
                    // 请求失败了
                    this.$bus.$emit('updateListDate', { isLoading: false, errMsg: err.message, users: [] })
                })
        }
    },
}
</script>

<style  scoped></style>